<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page import="org.jasig.cas.client.authentication.AttributePrincipal"%>
<html>
<head>
<meta content="webkit" name="renderer" />
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="js/ajaxLogin.js"></script>  -->
<script type="text/javascript" src="js/casPopupLogin.js"></script>
<script type="text/javascript" src="js/cas_ajax.js"></script>
<script type="text/javascript">
    		//var redirectUrl='http://lele.jdcrm.com:8080/SpringTest/view/ssologin/login.do';
    
    var cas = new CAS({
		//ajax跨域访问只能使用http请求，如果使用https,需要先访问base_url进行证书下载
		base_url: 'http://www.jdcas.com:8080/cas', 
		systemId: "1001",
		service: "http://lele.jdcrm.com:8080",
		/**
		 * 项目路径，例如你的项目地址为http://www.casclient.com/
		 * 此时可以不设置context_path。
		 * 若项目路径为http://www.casclient.com/cas
		 * 此时context_path:"/cas"
		 */
		context_path:"/SpringTest"

	});
	
    function HdLoad()
	{
    	cas.authenticate(function(isLogin, userInfo){
			if(isLogin){
				setUserInfo(userInfo);
			}
    	});	
	}

    function setUserInfo(userInfo){
		if(userInfo && userInfo.attributes){
			$("#ajaxCustNo").html(userInfo.attributes.custno);
			$("#ajaxLoginType").html(userInfo.attributes.loginType);
			$("#ajaxEmployid").html(userInfo.attributes.employid);
			$("#ajaxEmployflag").html(userInfo.attributes.employflag);
			$("#ajaxCusttype").html(userInfo.attributes.custtype);
			$("#ajaxAlipayid").html(userInfo.attributes.alipayid);
			$("#ajaxQQid").html(userInfo.attributes.qqid);
			$("#ajaxEmail").html(userInfo.attributes.email);
			$("#ajaxGrpid").html(userInfo.attributes.grpid);
			$("#ajaxCustname").html(userInfo.attributes.custname);
			$("#ajaxLoginname").html(userInfo.attributes.loginname);
			$("#ajaxMobileno").html(userInfo.attributes.mobileno);
		}
	}

	$(document).ready(function(){ 

		$(".top_nav").mousedown(function(e){ 
			$(this).css("cursor","move");//改变鼠标指针的形状 
			var offset = $(this).offset();//DIV在页面的位置 
			var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
			var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
			$(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
			
				$(".popup").stop();//加上这个之后 
				
				var _x = ev.pageX - x;//获得X轴方向移动的值 
				var _y = ev.pageY - y;//获得Y轴方向移动的值 
			
				$(".popup").animate({left:_x+"px",top:_y+"px"},10); 
			}); 

		}); 

		$(document).mouseup(function() { 
			$(".popup").css("cursor","default"); 
			$(this).unbind("mousemove"); 
		});
	}) ;
</script>

</head>
 <body onload="HdLoad()"> 

	<h1>main page</h1>
	<a href="view/login.jsp">login</a>
	<br>
	<a href="view/ssologin/login.do">sso login</a>
	<br>
	<a href="view/ffpSerch.jsp">Search</a>
	<br>
	<a href="view/regist.jsp">regist</a>
	<br>
	<a href="view/test/tiles.do">tiles</a>
	<br>
	<a href="view/test/logout.do">logout</a>
	<br>
<!-- 
	<a href="http://www.jdcas.com:8080/cas/logout?service=http://lele.jdcrm.com:8080/SpringTest/index.jsp">ssologout</a>
	<br>
	 -->
	<button class="tc" id="login_button">点击登录</button>
	<div id="gray"></div>
	<div class="popup" id="popup">
		<div class="top_nav" id='top_nav'>
			<div align="center">
				<span>Ajax 模式单点登录示例</span> <a class="guanbi"></a>
			</div>
		</div>
		<div class="theme-popbod dform" align="center">
				<form class="theme-signin" name="loginform" action="" method="post">
					<table a>
						<tr>
							<th colspan="1"></th>
							<th colspan="1"></th>
							<th colspan="1"></th>
							<th colspan="1"></th>
							<th colspan="1"></th>
						</tr>
						<tr>
						<td id="errorMsg" style="display: none;"><h4>你必须先登录！</h4></td>
						</tr>
						<tr>
						<td>用户名：</td>
						<td colspan="4"><input class="ipt" type="text" 
							name="userName" id="userName" value="" size="20"></td>
						</tr>
						<tr>
							<td>密码：</td>
							<td colspan="4"><input class="ipt" type="password"
							name="password" id="password" value="" size="20"></td>
						</tr>	
						<tr>
							<td>验证码：</td>
							<td colspan="1"><input class="ipt-code" type="text"
							name="authCode" id="authCode" value="" size="6"
							onkeyup="cas.changeAuthCodeCheck(this.id, 'jcaptchaMsg')">
							</td>
							<td colspan="1">
								<img  id="jcaptcha" src = "javascript:void(0)" onclick="cas.changeAuthCode(this.id, 'jcaptchaMsg')"  />
							</td>
							<td colspan="1">
							<img id="jcaptchaMsg"
								style="display: none;" class="captcha_message">
							</td>
						</tr>
	
						<tr>
							<td colspan="5" align="right">
							<input class="btn btn-primary" type="button" id="submitBtn" value=" 登 录 "></li>
							</td>
						</tr>
					</table>
				</form>
			</div>
	</div>
	<script type="text/javascript">
	
	$("#submitBtn").click(function(){
		cas.realLogin({username:$("#userName").val(), password:$("#password").val(), authCode:$("#authCode").val() }, function(isLogin, userInfo, errorMsg){
			if(isLogin){
				$("#gray").hide();
				$("#popup").hide();
				setUserInfo(userInfo);
			}else{
				$("#errorMsg").html(errorMsg);
				$("#errorMsg").show();
			}
		});
	});
	
	//窗口效果
	//点击登录class为tc 显示
	$(".tc").click(function(){
		
		cas.authenticate(function(isLogin, userInfo){
			if(isLogin){
				setUserInfo(userInfo);
			}else{
				$("#gray").show();
				$("#popup").show();//查找ID为popup的DIV show()显示#gray
				
				tc_center();
				cas.changeAuthCode("jcaptcha", 'jcaptchaMsg');
			}
		});	
		
	});
	//点击关闭按钮
	$("a.guanbi").click(function(){
		$("#gray").hide();
		$("#popup").hide();//查找ID为popup的DIV hide()隐藏
	})

	//窗口水平居中
	$(window).resize(function(){
		tc_center();
	});

	function tc_center(){
		var _top=($(window).height()-$(".popup").height())/2;
		var _left=($(window).width()-$(".popup").width())/2;
		
		$(".popup").css({top:_top,left:_left});
	}	
	</script>
	<div id="header_div">
	<h3>客户ID:<span id="ajaxCustNo"></span></h3>
	<h3>名称:<span id="ajaxCustname"></span></h3>
	<h3>登录名:<span id="ajaxLoginname"></span></h3>
	<h3>登录类型:<span id="ajaxLoginType"></span></h3>
	<h3>员工号:<span id="ajaxEmployid"></span></h3>
	<h3>员工标志:<span id="ajaxEmployflag"></span></h3>
	<h3>客户类型:<span id="ajaxCusttype"></span></h3>
	<h3>支付宝:<span id="ajaxAlipayid"></span></h3>
	<h3> QQ:<span id="ajaxQQid"></span></h3>
	<h3>手机号:<span id="ajaxMobileno"></span></h3>
	<h3>邮箱:<span id="ajaxEmail"></span></h3>
	<h3>金鹏:<span id="ajaxGrpid"></span></h3>
	
	</div>
</body>
</html>
